<template>
    <div class="main1">
        <div class="swiper mySwiper1">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in swiperList" :key="index">
                    <router-link :to="`/productdetail?id=${item.id}`">
                        <div class="img-box">
                            <img :src="`http://www.shangyuninfo.com/api/profile/product/${item.productRotation}`"
                                 alt="">
                        </div>
                    </router-link>
                </div>
            </div>
        </div>
        <router-link class="img-more" tag="div" to="/product">
            <img src="../../../assets/indexImg/four_more.png" alt="">
        </router-link>
    </div>
</template>

<script>
    import Swiper, {Pagination, EffectCoverflow,} from "swiper"

    Swiper.use([Pagination, EffectCoverflow,])
    // import "swiper/swiper-bundle.min.js"
    import "swiper/swiper-bundle.css"
    import {getProductList1} from "../../../api";

    export default {
        name: "two",
        data() {
            return {
                swiperList: [],//图片轮播数组
            }
        },
        created() {
            getProductList1().then(res => {
                console.log(res)
                this.swiperList = res.rows;
                console.log(this.swiperList)
            })
        },
        async mounted() {
            await getProductList1().then(res => {
                console.log(res)
                this.swiperList = res.rows;
                console.log(this.swiperList)
            })
            new Swiper(".mySwiper1", {
                effect: "coverflow",
                grabCursor: true,
                centeredSlides: false,
                slidesPerView: "5",
                coverflowEffect: {
                    rotate: 20,
                    stretch: -20,
                    depth: 50,
                    modifier: 1,
                    slideShadows: false,
                },
            });

        },
    }
</script>

<style scoped lang="less">
    .main1 {
        position: relative;
        margin-top: 10%;
        width: 70%;
        height: 100%;
        perspective: 1200px;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
        list-style: none;
        padding: 0;
        z-index: 1;

        img {
        }
    }

    html,
    body {
        position: relative;
        height: 100%;
    }

    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
    }

    .swiper {
        width: 100%;
        height: 100%;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 100%;
        height: 100%;
    }

    .swiper-slide img {
        display: block;
        width: 100%;
    }

    .img-box {
        overflow: hidden;

        img {
            transition: 1s;
            width: 100%;
            height: 380px;
        }

        img:hover {
            transform: scale(1.1, 1.1);
        }
    }

    .img-more {
        position: absolute;
        right: 0;
        bottom: 30%;
        width: 104px;
        height: 50px;
        z-index: 1001;
        cursor: pointer;
    }
</style>